<template>
  <div id="lineBarChart" ref="lineBarChart" class="linebar-chart"></div>
</template>
<script>
import { lineAndBarOptions, resizeChart } from "@/assets/js/echartOptions.js";
export default {
  name: "Linebar",
  data() {
    return {
      lineBarChart: null,
      options: null,
    };
  },
  watch: {
    xAxis(val) {
      this.options.xAxis = val;
      this.lineBarChart.setOption(
        lineAndBarOptions({ ...this.options }),
        true,
        true
      );
      this.lineBarChart.resize();
    },
    maxYAxis(val) {
      this.options.maxYAxis = val;
      this.lineBarChart.setOption(
        lineAndBarOptions({ ...this.options }),
        true,
        true
      );
      this.lineBarChart.resize();
    },
    minYAxis(val) {
      this.options.minYAxis = val;
      this.lineBarChart.setOption(
        lineAndBarOptions({ ...this.options }),
        true,
        true
      );
      this.lineBarChart.resize();
    },
    datas: {
      handler(val, oldVal) {
        this.options.datas = [...val];
        this.lineBarChart.setOption(
          lineAndBarOptions({ ...this.options }),
          true,
          true
        );
        this.lineBarChart.resize();
      },
      deep: true,
    },
    width(val) {
      this.options.width = val;
      this.lineBarChart.setOption(
        lineAndBarOptions({ ...this.options }),
        true,
        true
      );
      this.lineBarChart.resize();
    },
    legendData(val) {
      this.options.legendData = val;
      this.lineBarChart.setOption(
        lineAndBarOptions({ ...this.options }),
        true,
        true
      );
      this.lineBarChart.resize();
    },
  },
  props: {
    echartTitle: {
      type: Object,
      default: () => {
        return {

        };
      },
    },
    dataZoom: {
      type: Array,
      default: () => {
        return [];
      },
    },
    trigger: {
      type: String,
      default: "axis",
    },
    orient: {
      type: String,
      default: "horizontal",
    },
    isLength: {
      type: Boolean,
      default: true,
    },
    selectedList: {
      type: Object,
      default: () => {},
    },
    isScale: {
      type: Boolean,
      default: true,
    },
    boundaryGap: {
      type: Boolean,
      default: false,
    },
    // 字体大小的缩放比例
    textRate: {
      type: Number,
      default: 1,
    },
    legendSize: {
      type: Number,
      default: 12,
    },
    alwaysShowContent: {
      type: Boolean,
      default: false,
    },
    isSmooth: {
      type: Boolean,
      default: true,
    },
    grid: {
      type: Object,
      default: () => {
        return {
          left: "5%",
          right: "7%",
          bottom: "5%",
          top: "16%",
          containLabel: true,
        };
      },
    },
    legendLeft: {
      type: String,
      default: "left",
    },
    legendData: Array,
    barWidth: {
      type: Number,
      default: 10,
    },
    legendIcon: {
      type: String,
      default: "rect",
    },
    barBorderRadius: {
      type: Array,
      default: () => [0, 0, 0, 0],
    },
    legendItemHeight: {
      type: Number,
      default: 2,
    },
    legendItemWidth: {
      type: Number,
      default: 12,
    },
    axisLabelColor: {
      type: String,
      default: "rgba(255, 255, 255, 0.6)",
    },
    axisLabelSize: {
      type: Number,
      default: 12,
    },
    // 是否有操作按钮
    hasHandleBtn: {
      type: Boolean,
      default: false,
    },
    isBarAndLine: {
      type: Boolean,
      default: true,
    },
    rotate: {
      type: Number,
      default: 0,
    },
    splitLineColor: {
      type: String,
      default: "rgba(255, 255, 255, 0.2)",
    },
    xAxisName: {
      type: String,
      default: "",
    },
    yAxisName: {
      type: String,
      default: "",
    },
    axisLineColor: {
      type: String,
      default: "rgba(255, 255, 255, 0.6)",
    },
    isAxisLine: {
      type: Boolean,
      default: false,
    },
    symbolRotate: {
      type: Number,
      default: 30,
    },
    isYAxisLine: {
      type: Boolean,
      default: false,
    },
    splitLineY: {
      type: Boolean,
      default: true,
    },
    splitNumber: {
      type: Number,
      default: 5,
    },
    splitNumber2: {
      type: Number,
      default: 5,
    },
    splitLineY2: {
      type: Boolean,
      default: false,
    },
    isAxisLabel: {
      type: Boolean,
      default: true,
    },
    doubleY: {
      type: Boolean,
      default: true,
    },
    yAxisName2: {
      type: String,
      default: "",
    },

    yAxisColor: {
      type: String,
      default: "rgba(255, 255, 255, .6)",
    },
    width: {
      type: String,
      default: "100%",
    },
    legendColor: {
      type: String,
      default: "#fff",
    },
    tooltipPosition: {
      type: Boolean,
      default: false,
    },
    tooltipAxisVal: {
      type: Boolean,
      default: true,
    },
    maxYAxis: Number,
    minYAxis: Number,
    maxYAxis2: Number,
    minYAxis2: Number,
    datas: Array,
    xAxis: Array,
    clickFn: {
      type: Function,
      default: (e) => {},
    },
    tooltipFormatter: {
      type: String,
    },
    isShowTooltip: {
      type: Boolean,
      default: true,
    },
  },
  mounted() {
    this.lineBarChart = this.$echarts.init(this.$refs["lineBarChart"]);
    this.options = {
      tooltipFormatter: this.tooltipFormatter,
      echartTitle: this.echartTitle,
      dataZoom: this.dataZoom,
      orient: this.orient,
      isLength: this.isLength,
      selectedList: this.selectedList,
      legendLeft: this.legendLeft,
      legendIcon: this.legendIcon,
      legendItemHeight: this.legendItemHeight,
      isSmooth: this.isSmooth,
      legendItemWidth: this.legendItemWidth,
      datas: this.datas,
      xAxis: this.xAxis,
      barWidth: this.barWidth,
      legendData: this.legendData,
      splitLineColor: this.splitLineColor,
      isBarAndLine: this.isBarAndLine,
      axisLabelColor: this.axisLabelColor,
      axisLabelSize: this.axisLabelSize,
      axisLineColor: this.axisLineColor,
      isAxisLine: this.isAxisLine,
      isYAxisLine: this.isYAxisLine,
      rotate: this.rotate,
      symbolRotate: this.symbolRotate,
      xAxisName: this.xAxisName,
      yAxisName: this.yAxisName,
      splitLineY: this.splitLineY,
      splitNumber: this.splitNumber,
      splitNumber2: this.splitNumber2,
      splitLineY2: this.splitLineY2,
      yAxisColor: this.yAxisColor,
      yAxisName2: this.yAxisName2,
      doubleY: this.doubleY,
      width: this.width,
      barBorderRadius: this.barBorderRadius,
      trigger: this.trigger,
      grid: this.grid,
      isScale: this.isScale,
      boundaryGap: this.boundaryGap,
      hasHandleBtn: this.hasHandleBtn,
      clickFn: this.parentClickFn,
      alwaysShowContent: this.alwaysShowContent,
      tooltipPosition: this.tooltipPosition,
      maxYAxis: this.maxYAxis,
      minYAxis: this.minYAxis,
      maxYAxis2: this.maxYAxis2,
      minYAxis2: this.minYAxis2,
      legendColor: this.legendColor,
      legendSize: this.legendSize,
      tooltipAxisVal: this.tooltipAxisVal,
      textRate: this.textRate,
      isAxisLabel: this.isAxisLabel,
      isShowTooltip: this.isShowTooltip,
    };
    this.lineBarChart.setOption(
      lineAndBarOptions({ ...this.options }),
      true,
      true
    );
    this.lineBarChart.resize();
    let self = this;
    if (this.$listeners["eventFn"]) {
      this.lineBarChart.on("click", (params) => {
        self.$emit("eventFn", params);
      });
    }
    resizeChart(this.lineBarChart);
  },
  methods: {
    parentClickFn(e) {
      this.$emit("clickFn", e);
    },
  },
};
</script>
<style scoped>
.linebar-chart {
  width: 100%;
  height: 100%;
}
</style>
